<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div">
          <img src="../../../assets/返回.png" @click="back()" alt="">
          <span class="solid" @click="back()" >上一步</span>
        </div>
        <div class="div">
          <span v-show="type == 1">图文咨询</span>
          <span v-show="type == 2">视频咨询</span>
        </div>
        <div class="div">
          <span class="solid" @click="next()">下一步</span>
        </div>
      </header>
      <div class="menu">
        <el-steps :active="menuIndex" align-center>
          <el-step title="" v-for="(item, index) in menuList" :key="index"
                   @click.native="changeMenu(index)"
                   process-status="success"
                   :description="item">
            <template #icon>
              <div v-if="menuIndex >= index" style="width: 15px;height: 15px;">
                <img src="../../../assets/步骤选择.png" style="width: 15px;height: 15px;" alt="">
              </div>
              <div v-else style="width: 6px;height: 15px;background: #1DA4F2;display: flex;align-items: center;justify-content: center">
                <a style="width: 6px;height: 6px;border-radius: 50%;background: white;display: flex;position: absolute;"></a>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
    <div class="content">
      <div class="peopleDiv" @click.stop="selectPeople(item)" v-for="(item, index) in peopleList" :key="index">
        <div class="peopleLeft">
          <img class="photo" v-if="item.SEX == 1" src="../../../assets/男-被服务@2x.png" alt="">
          <img class="photo" v-else-if="item.SEX == 2" src="../../../assets/女-被服务@2x.png" alt="">
        </div>
        <div class="peopleContent">
          <p>
            <span class="name">{{item.name}}</span>
            <span class="age">{{item.age}}岁</span>
            <!--              0本人 1配偶 2父母 3子女 4其他-->
            <button v-show="item.TIPS == 0" class="biaoqian">本人</button>
            <button v-show="item.TIPS == 1" class="biaoqian biaoqianBlue">配偶</button>
            <button v-show="item.TIPS == 2" class="biaoqian biaoqianBlue">父母</button>
            <button v-show="item.TIPS == 3" class="biaoqian biaoqianBlue">子女</button>
            <button v-show="item.TIPS == 4" class="biaoqian biaoqianBlue">其他</button>
          </p>
          <p class="phone">手机号: {{item.phone}}</p>
        </div>
        <div class="peopleRight">
          <img v-if="PATIENT_USER_ID !== item.PATIENT_USER_ID" src="../../../assets/蓝未选择.png" alt="">
          <img v-else src="../../../assets/题目选择.png" alt="">
        </div>
      </div>
    </div>
<!--    <div class="peopleBottom">-->
<!--      <button @click="addPeople()"><img src="../../../assets/白添加.png" alt="">添加咨询人</button>-->
<!--    </div>-->
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'TuWenPeopleServed',
  data () {
    return {
      type: this.$route.query.type,
      menuIndex: 2,
      menuList: ['选择医生', '选择服务', '选择咨询人', '描述病情', '费用支付'],
      peopleList: [],
      PATIENT_USER_ID: '', // 当前选择的被服务人userid
      isYoung: false,
      PATIENT_NAME: '' // 被服务人姓名
    }
  },
  computed: {
  },
  mounted () {
    $('.content').css({height: $(window).height() - $('.top').height() - 110 + 'px'})
    this.getPeople()
    if (this.type == 1) {
      document.title = '图文咨询'
    } else if (this.type == 2) {
      document.title = '视频咨询'
    }
    if (sessionStorage.getItem('tuWenPeopleServedData') !== null) {
      let data = JSON.parse(sessionStorage.getItem('tuWenPeopleServedData'))
      this.PATIENT_USER_ID = data.PATIENT_USER_ID
      this.isYoung = data.isYoung
      this.PATIENT_NAME = data.PATIENT_NAME
    }
  },
  methods: {
    // 下一步
    next () {
      if (this.PATIENT_USER_ID !== '' && this.PATIENT_USER_ID !== undefined && this.PATIENT_USER_ID !== null) {
        this.$router.push({path: '/second', query: {'type': this.type, PATIENT_USER_ID: this.PATIENT_USER_ID, PATIENT_NAME: this.PATIENT_NAME, isYoung: this.isYoung}})
      } else {
        Toast('请选择咨询人')
      }
    },
    // 新增被服务人按钮
    addPeople () {
      sessionStorage.removeItem('peopleInfo')
      this.$router.push({path: '/addPeople', query: {'type': this.type}})
    },
    // 选择被服务人
    selectPeople (item) {
      this.PATIENT_NAME = item.name
      if (item.age < 6) {
        this.isYoung = true
      } else {
        this.isYoung = false
      }
      this.fuwuShow = false
      // if (this.PATIENT_USER_ID !== item.PATIENT_USER_ID) {
      this.PATIENT_USER_ID = item.PATIENT_USER_ID
      // } else {
      //   this.PATIENT_USER_ID = ''
      // }
    },
    // 点击导航条
    changeMenu (index) {
    },
    // 获取被服务人信息
    getPeople () {
      this.$http.findPatient()
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.peopleList = res.data.data
            if (sessionStorage.getItem('tuWenPeopleServedData') !== null) {

            } else {
              this.selectPeople(this.peopleList[0])
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  },
  destroyed () {
    let obj = {
      PATIENT_USER_ID: this.PATIENT_USER_ID,
      isYoung: this.isYoung,
      PATIENT_NAME: this.PATIENT_NAME
    }
    sessionStorage.setItem('tuWenPeopleServedData', JSON.stringify(obj))
    // sessionStorage.removeItem('SecondData')
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #FAF9FE;
}
.top{
  position: sticky;
  top: 0;
  background: white;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
}
.menu{
  width: 100%;
  height: 60px;
  background: #1DA4F2;
  box-shadow: 0px 1px 0px 0px #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
}
.div{
  width: 33%;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.div:nth-child(1) img{
  width: 7px;
  height: 13px;
  margin: 0 5px 0 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.solid{
  color: #1DA4F2;
}
/*/ 选择框 开始样式/*/
/deep/ .el-steps--horizontal{
  width: 105%;
}
/deep/ .el-step.is-center .el-step__description{
  padding: 0;
}
/deep/ .el-step__description{
  margin: 0;
  font-size: 13px;
}
/deep/ .el-step__icon{
  width: auto;
  height: auto;
}
/deep/ .el-step__icon.is-text{
  border: none;
}
/deep/ .is-finish,
/deep/ .el-step__description.is-process{
  color: #fff;
}
/deep/ .el-step__description.is-finish{
  color: white !important;
}
/deep/ .el-step__description.is-wait{
  color: rgba(255, 255, 255, 0.7);
}
/deep/ .el-step__head.is-finish{
  border-color: #fff;
}
/deep/ .el-step__head.is-wait{
  border-color: transparent !important;
}
/deep/ .el-step__line{
  border-color: transparent !important;
}
/deep/ .el-step.is-horizontal .el-step__line{
  height: 1px;
  /*top:7px;*/
  top: 35%;
}
/deep/ .el-step__line{
  background: white;
}
/*/ 选择框 结束样式/*/

.content{
  overflow: auto;
}
.peopleDiv {
  width: 95%;
  height: 60px;
  overflow: auto;
  display: flex;
  justify-content: space-between;
  /*padding: 5px;*/
  box-sizing: border-box;
  border-bottom: 1px solid #E5E5E5;
  margin: 10px auto;
  background: #fff;
  border-radius: 5px;
  padding: 0 10px;
  box-sizing: border-box;
}
.peopleDiv:last-child{
  margin-bottom: 60px!important;
}
.peopleLeft {
  display: flex;
  align-items: center;
}
.peopleContent {
  width: 85%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.peopleContent p{
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}
.peopleContent p span{
  margin-right: 8px;
}
.name{
  font-size: 15px;
}
.age{
  font-size: 11px;
  color: #999;
}
.phone{
  font-size: 13px;
  color: #999;
}
.biaoqian{
  width: 30px;
  height: 20px;
  background: #5789ef;
  color: white;
  font-size: 11px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
}
.biaoqianBlue{
  background: #8ED4FC;
}
.peopleRight{
  display: flex;
  align-items: center;
  justify-content: center;
}
.peopleRight img {
  width: 14px;
  height: 14px;
}
.photo{
  width: 40px;
  height: 40px;
}
.peopleBottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  font-family: "PingFang SC";
  font-weight: bold;
}
.peopleBottom button{
  width: 95%;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
  border-radius: 22px;
  color: white;
  border: none;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.peopleBottom button img{
  width: 15px;
  height: 15px;
  margin-right: 8px;
}
</style>
